<template>
  <div>
    <div class="container">
      <div>
        <el-form :model="casePrcTasksEntity" ref="casePrcTasksEntity" class="select-submit-form">
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="承保机构" prop="comCode">
                <el-select placeholder="承保机构" v-model="casePrcTasksEntity.comCode"></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="大病赔案号" prop="caseNo">
                <el-input placeholder="请输入赔案号" v-model="casePrcTasksEntity.caseNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="社/医保号" prop="socialSecurityNo">
                <el-input placeholder="请输入社/医保号" v-model="casePrcTasksEntity.socialSecurityNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">

            <el-col :span="8">
              <el-form-item label="被保险人" prop="insuredName">
                <el-input v-model="casePrcTasksEntity.insuredName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号" prop="insuredNameNumber">
                <el-input v-model="casePrcTasksEntity.insuredNameNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务类型" prop="taskType">
                <el-select placeholder="请选择...." v-model="casePrcTasksEntity.taskType">
                  <el-option label="案件登记" value="case_main"></el-option>
                  <el-option label="核赔" value="undwrt"></el-option>
                  <el-option label="注销" value="cancel"></el-option>
                  <el-option label="注销审核" value="cancel_audit"></el-option>
                  <el-option label="调查" value="survey"></el-option>
                  <el-option label="调查审核" value="survey_audit"></el-option>
                  <el-option label="结算" value="settle"></el-option>
                  <el-option label="结算审核" value="settle_audit"></el-option>
                  <el-option label="重开" value="recase"></el-option>
                  <el-option label="重开审核" value="recase_audit"></el-option>
                  <el-option label="任务改派" value="schedul"></el-option>
                  <el-option label="退票" value="refund_ticket"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="select-btn-group">
                <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" size="medium" @click="resetForm('casePrcTasksEntity')">重置</el-button>&nbsp;
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template>
        <div>
          <el-divider></el-divider>
        </div>
      </template>
      <el-table
        :data="tableData"
        class="table"
        ref="multipleTyiable"
        v-loading="loading"
        element-loading-text="Loading"
        header-cell-class-name="table-header"
        style="margin: 30px 0;border: 1px solid #d6d9d8;"
      >
        <!--<el-table-column type="selection" width="55" align="center"></el-table-column>-->
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="caseNo" label="大病赔案号" align="center" width="210px">
         <!-- <template slot-scope="scope">
            <a :href="'http://'+ scope.row.caseNo" target="_blank" style="text-decoration:none;color: #5151ef">{{scope.row.caseNo}}</a>
          </template>-->
        </el-table-column>
        <!--<el-table-column prop="coreNo" label="核心赔案号" align="center"></el-table-column>-->
        <el-table-column prop="policyNo" label="保单号" align="center" width="210px"></el-table-column>
        <el-table-column prop="insuredName" label="被保险人" align="center"></el-table-column>
        <el-table-column prop="insuredNameNumber" label="证件号" align="center" width="200px"></el-table-column>
        <el-table-column prop="reportDate" label="报案时间" align="center" width="200px"></el-table-column>
        <el-table-column prop="damageDate" label="出险时间" align="center" width="200px"></el-table-column>
        <el-table-column prop="taskType" label="任务类型" align="center"></el-table-column>
        <el-table-column prop="taskState" label="任务状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.taskState == '01'">待处理</span>
            <span v-if="scope.row.taskState == '02'">正处理</span>
            <span v-if="scope.row.taskState == '03'">已处理</span>
            <span v-if="scope.row.taskState == '04'">已退回</span>
            <span v-if="scope.row.taskState == '05'">已关闭</span>
            <span v-if="scope.row.taskState == 'payee'">待支付</span>
            <span v-if="scope.row.taskState == 'close_case'">已处理</span>
            <span v-if="scope.row.taskState == 'cancel'">已处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="auto" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-dialog title="案件流程查看"
                 :visible.sync="editFormVisible"
                 :close-on-click-modal="false"
                 class="edit-form">
        <el-form :model="editForm" label-width="80px" ref="editForm">
          <template>
            <el-table
              :data="processEngineList"
              stripe="true"
              fit="true">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                label="环节"
                width="140">
                <template slot-scope="scope">
                  <a :href="'http://'+ scope.row.taskType" target="_blank" style="text-decoration:none;color: blue"
                     v-if="scope.row.taskType == 'case_main'">案件处理</a>
                  <a :href="'http://'+ scope.row.taskType" target="_blank" style="text-decoration:none;color: blue"
                     v-if="scope.row.taskType == 'undwrt'">核赔</a>
                  <a :href="'http://'+ scope.row.taskType" target="_blank" style="text-decoration:none;color: blue"
                     v-if="scope.row.taskType == 'undwrt_f_one'">分公司核赔一级</a>
                </template>
              </el-table-column>
              <el-table-column
                prop="handleComrName"
                label="处理人机构"
                width="120">
              </el-table-column>
              <el-table-column
                prop="handlerName"
                label="处理人"
                width="100">
              </el-table-column>
              <el-table-column
                prop="taskState"
                label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.taskState == '01'">待处理</span>
                  <span v-if="scope.row.taskState == '02'">正处理</span>
                  <span v-if="scope.row.taskState == '03'">已处理</span>
                  <span v-if="scope.row.taskState == '04'">已退回</span>
                  <span v-if="scope.row.taskState == '05'">已关闭</span>
                  <span v-if="scope.row.taskState == '06'">提交上级</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="flowInTime"
                label="开始时间">
              </el-table-column>
              <el-table-column
                prop="flowOutTime"
                label="完成时间">
              </el-table-column>
            </el-table>
          </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleCancel('editForm')">关闭</el-button>
        </div>
      </el-dialog>


      <div style="margin-top: 15px">
        <template>
          <div class="pagination">
            <el-pagination v-show=" pagination.totalPage>0" :current-page="pagination.currentPage"
                           :page-sizes="[10, 25, 50, 100]"
                           :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                           @current-change="queryFun" @size-change="handleSizeChange">
            </el-pagination>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  import * as api from '@/api/baseDate'

  export default {
    name: 'rengonghepei',
    data() {
      return {
        loading: false,//加载模态框
        //分页
        pagination: {
          currentPage: 1, // 当前页
          rowsNumber: 10, // 每页条数
          totalPage: 0 // 总条数
        },
        //定义属性
        name: undefined,
        date: undefined,
        address: undefined,
        //默认dialog弹窗不打开（true打开，false为不打开）
        editFormVisible: false,
        redore: true,
        guanzhus: null,
        editForm: null,
        centerDialogVisible: false,
        query: {
          address: '',
          name: '',
          pageIndex: 1,
          pageSize: 10
        },
        tableData: [],//表格数据
        processEngineList: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        pageTotal: 0,
        form: {},
        idx: -1,
        id: -1,
        casePrcTasksEntity: [],
      };
    },
    created() {

    },
    methods: {
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      delAllSelection() {
        const length = this.multipleSelection.length;
        let str = '';
        this.delList = this.delList.concat(this.multipleSelection);
        for (let i = 0; i < length; i++) {
          str += this.multipleSelection[i].name + ' ';
        }
        this.$message.error(`删除了${str}`);
        this.multipleSelection = [];
      },
      //查看
      handleEdit: function (index, row) {
        this.editFormVisible = true;//dialog对话窗口打开
        //this.editForm = Object.assign({}, row);//将数据传入dialog页面
        this.processEngineList = row.processEngineList;
        this.editForm.index = index;//传递当前index
      },
      //取消
      handleCancel(formName) {
        this.editFormVisible = false;
      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, 'pageIndex', val);
        this.getData();
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //分页
      queryFun(pageNum) { // 改变当前页事件
        this.pagination.currentPage = pageNum
        this.onSubmit();
      },
      handleSizeChange(pageSize) { // 改变当前页条数事件
        this.pagination.rowsNumber = pageSize;
        this.onSubmit();
      },
      //查询
      onSubmit() {
        this.loading = true;
        api.queryProcessedTasksList({
          "comCode": this.casePrcTasksEntity.comCode,
          "caseNo": this.casePrcTasksEntity.caseNo,
          "socialSecurityNo": this.casePrcTasksEntity.socialSecurityNo,
          "insuredName": this.casePrcTasksEntity.insuredName,
          "insuredNameNumber": this.casePrcTasksEntity.insuredNameNumber,
          "taskType": this.casePrcTasksEntity.taskType,
          "pageNum": this.pagination.currentPage,
          "pageSize": this.pagination.rowsNumber
        }).then(res => {
          this.tableData = res.data.list;
          this.pagination.totalPage = res.data.total;
          this.loading = false;
        })
      }
    }
  };
</script>
<style lang="scss" scoped></style>
